@import "variables";

seed-parent {

  .gray-background {
    background: #ffffff;
  }

  .radar-map-box {
    border-top: pxTorem(20) solid #f0f0f0;
    padding-bottom: pxTorem(36);
    .tips {
      font-size: standard($f, f6);
      color: color($h5, c4);
      text-align: center;
    }
    .timeAndQuest {
      padding: 0 pxTorem(34) 0 pxTorem(24);
      display: flex;
      justify-content: space-between;
      .times {
        font-size: standard($f, f3);
        color: color($h5, c4);
      }
      .quest {
        width: pxTorem(38);
        height: pxTorem(38);
        text-align: center;
        line-height: pxTorem(38);
        box-sizing: content-box;
        border-radius: 100%;
        background: #221814;
        color: #FFFFFF;
      }
    }
    #radar-map {
      height: 250px;
      //div{
      //  height: 200px;
      //  canvas{
      //    height: 200px !important;
      //  }
      //}
    }
  }

  .tips-text-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 pxTorem(75) 0 pxTorem(75);
    .text-content {
      background: #FFFFFF;
      border-radius: pxTorem(8);
      .tips-text {
        padding: pxTorem(46) pxTorem(28);
        padding-bottom: pxTorem(34);
        font-size: standard($f, f4);
        color: color($h5, c4);
        line-height: 150%;
        max-height: pxTorem(454);
        overflow-y: scroll;
      }
      .Ikown {
        height: pxTorem(90);
        text-align: center;
        line-height: pxTorem(90);
        font-size: standard($f, f3);
        color: color($h5, c13);
      }
    }
  }

  .recently-scores {
    border-top: pxTorem(20) solid #f0f0f0;
    height: pxTorem(200px);
    background: #221814;
    display: flex;
    align-items: center;
    position: relative;
    .rank {
      color: #f4d320;
      font-size: pxTorem(96);
      font-weight: bold;
      margin: 0 pxTorem(40) 0 pxTorem(40);
    }
    .scores-info {
      display: flex;
      flex: 1;
      height: 100%;
      box-sizing: border-box;
      padding: pxTorem(10) 0;
      flex-direction: column;
      justify-content: space-around;
      font-size: standard($f, f4);
      color: color($h5, c10);
    }
    .arrow {
      padding-right: pxTorem(20);
      span {
        position: absolute;
        right: pxTorem(24);
        top: pxTorem(130);
        font-size: standard($f, f6);
        color: color($h5, c3);
      }
    }
  }

  .tabs {
    display: flex;
    background: #ffffff;
    .teach-calendar {
      flex: 1;
      text-align: center;
      line-height: pxTorem(140);
      img {
        width: pxTorem(64);
        height: pxTorem(64);
      }
    }
    .grow-data {
      flex: 1;
      text-align: center;
      line-height: pxTorem(140);
      img {
        width: pxTorem(64);
        height: pxTorem(64);
      }
    }
    .tab {
      flex: 1;
      text-align: center;
      padding-top: pxTorem(30);
      padding-bottom: pxTorem(34);
      img {
        width: pxTorem(64);
        height: pxTorem(64);
      }
      &.un-read {
        position: relative;
        &:after {
          position: absolute;
          right: pxTorem(70);
          top: pxTorem(30);
          display: block;
          content: '';
          width: pxTorem(12);
          height: pxTorem(12);
          border-radius: pxTorem(12);
          background: color($h5, c11);
        }
      }
    }
  }

  .student-info {
    //background: color($h5, c1);
    background: #221814;
    display: flex;
    width: 100%;
    height: pxTorem(178px);
    padding: 0 pxTorem(30) 0 pxTorem(30);
    align-items: center;
    justify-content: space-between;
    .student-info-left {
      display: flex;
      align-items: center;
      font-size: standard($f, f2);
      color: color($h5, c10);
      .avatarImg {
        width: pxTorem(100);
        height: pxTorem(100);
        border-radius: 100%;
        margin-right: pxTorem(20);
      }
      .avatarText {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        color: color($h5, c10);
        height: pxTorem(100);
        .name {
          font-size: standard($f, f1);
        }
        .text {
          font-size: standard($f, f6);
          opacity: 0.8;
        }
      }
    }
    .student-info-right {
      font-size: standard($f, f3);
      color: color($h5, c10);
      display: flex;
      align-items: center;
      &:before {
        content: '';
        display: inline-block;
        width: pxTorem(32);
        height: pxTorem(28);
        background: url(#{$icons-path}/switch.png) no-repeat center/contain;
        background-size: 100% 100%;
        margin-right: pxTorem(10);
      }
    }
  }

  .sign-up-classes {
    background: #FFFFFF;
    border-top: pxTorem(20) solid #f0f0f0;
  }

  .classes-title {
    height: pxTorem(88);
    display: flex;
    align-items: center;
    font-size: standard($f, f3);
    color: color($h5, c2);
    padding-left: pxTorem(20);
    position: relative;
    .className {
      max-width: 60%;
    }
    .down-img {
      position: absolute;
      display: block;
      padding: pxTorem(30);
      right: 0;
      width: pxTorem(88);
      height: pxTorem(88);
    }
    &:after {
      position: absolute;
      left: 0;
      top: pxTorem(30);
      content: '';
      display: flex;
      justify-content: space-between;
      width: pxTorem(6);
      height: pxTorem(28);
      background: #221814;
    }
    .mark {
      padding: pxTorem(4px);
      border-radius: pxTorem(4);
      margin-left: pxTorem(20);
      &.zong {
        font-size: standard($f, f8);
        color: color($h5, c1);
        border: 1px solid color($h5, c1);
      }
      &.zhuan {
        font-size: standard($f, f8);
        color: color($h5, c12);
        border: 1px solid color($h5, c12);
      }
      &.ci {
        font-size: standard($f, f8);
        color: color($h5, c16);
        border: 1px solid color($h5, c16);
      }
      &.gray {
        font-size: standard($f, f8);
        color: color($h5, c5);
        border: 1px solid color($h5, c5);
      }
    }
  }

  .classListBox {
    padding: 0 pxTorem(24);
    height: 100%;
    display: flex;
    align-items: center;
    .classList {
      border-radius: pxTorem(10);
      background: #FFFFFF;
      overflow-y: scroll;
      max-height: 50%;
      width: 100%;
      li {
        height: pxTorem(140);
        padding: 0 pxTorem(24);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .mark {
          padding: pxTorem(4px);
          border-radius: pxTorem(4);
          margin-left: pxTorem(20);
          &.zong {
            font-size: standard($f, f8);
            color: color($h5, c1);
            border: 1px solid color($h5, c1);
          }
          &.zhuan {
            font-size: standard($f, f8);
            color: color($h5, c12);
            border: 1px solid color($h5, c12);
          }
          &.ci {
            font-size: standard($f, f8);
            color: color($h5, c16);
            border: 1px solid color($h5, c16);
          }
          &.gray {
            font-size: standard($f, f8);
            color: color($h5, c5);
            border: 1px solid color($h5, c5);
          }
        }
      }
      .choose:after {
        display: block;
        content: '';
        width: pxTorem(30);
        height: pxTorem(30);
        background: url(#{$icons-path}/choose.png) no-repeat center/contain;
        background-size: 100% 100%;
      }
    }
  }

  .childListBox {
    padding: 0 pxTorem(24);
    border-radius: pxTorem(10);
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .childList {
    background: #FFFFFF;
    overflow-y: scroll;
    max-height: 50%;
    width: 100%;
    border-radius: pxTorem(10);
    li {
      height: pxTorem(140);
      padding: 0 pxTorem(24);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .nameBox {
        display: flex;
        align-items: center;
        width: 80%;
        .childAvatar {
          width: pxTorem(80);
          height: pxTorem(80);
        }
        .childName {
          flex: 1;
          @include multi-line-exllipsis(2);
        }
      }
    }
    .choose:after {
      display: block;
      content: '';
      width: pxTorem(30);
      height: pxTorem(30);
      background: url(#{$icons-path}/choose.png) no-repeat center/contain;
      background-size: 100% 100%;
    }
  }

  .hasNoClass {
    text-align: center;
    margin-top: pxTorem(90);
    img {
      display: block;
      margin: 0 auto;
      margin-bottom: pxTorem(40);
      width: pxTorem(210);
      height: pxTorem(210);
    }
    span {
      font-size: standard($f, f5);
      color: color($h5, c4);
    }
  }
}
